iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
0
自我挑戰組

資工的日常系列 第 30

HTML javascript 引入 重複html 與課程網頁成果分享

  • 分享至 

  • xImage
  •  

網頁成果github:https://github.com/fcu-d0440478/user_experience_result
基於個資已經將個人及組員相關連結移除


使用Navbar時,經常會做出多個分頁,但Navbar內容幾乎每頁都會用,要修改時就要每一頁都修改,非常麻煩。今天介紹透過JavaScript引入重複的HTML。且分享一下成果~


假設我要每頁都用這個Navbar

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    ...詳情請見github
</nav>

1.把這著Navbar的HTML程式碼複製並獨立檔案,檔名自訂我這取叫header.js。副檔名用js。
2.自訂一個變數header,用''包住原本的Navbar HTML,記得加; 就是宣告這header是我們的Navbar
3.然後就會看到各種出錯,因為環境是javascript所以用把所有html的部分加\註解掉,每行後面都要!
4.最後document.write(header); document就是呼叫這javascript的HTML網頁.write會寫入裡面的參數header,也就是我們的Navbar部分

header ='<nav class="navbar navbar-expand-md bg-dark navbar-dark">\
        <a class="navbar-brand" href="index.html">Home</a>\
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">\
            <span class="navbar-toggler-icon"></span>\
        </button>\
        <div class="collapse navbar-collapse" id="collapsibleNavbar">\
            <ul class="navbar-nav">\
                <li class="nav-item">\
                    <a class="nav-link" href="page_noodle.html">麵類</a>\
                </li>\
                <li class="nav-item">\
                    <a class="nav-link" href="page_rice.html">飯類</a>\
                </li>\
                <li class="nav-item">\
                    <a class="nav-link" href="page_drink.html">飲料</a>\
                </li>\
            </ul>\
            <ul class="navbar-nav ml-auto mr-5">\
                <li class="nav-item dropdown">\
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">\
                        組員名單\
            </a>\
                    <div class="dropdown-menu">\
                        <a class="dropdown-item" href="">STAN  41號</a>\
                        <a class="dropdown-item" href="">YUN  23號</a>\
                    </div>\
                </li>\
            </ul>\
        </div>\
    </nav>';
document.write(header);

5.接著在我們需要寫入的地方(要寫在開頭也就是<body>的第一行)加這行。src放檔案位置和檔名,不同位置要導入一下路徑。

<script src="./scripts/header.js"></script>

6.每頁的body第一行都加這個就都有Navbar了。以後修改也只要改一個檔案。


相關圖
https://ithelp.ithome.com.tw/upload/images/20180119/201078665wPgTfuWzP.png


終於完賽了,其實我還沒有時間好好做這個,天阿我明天之後才是最閒的,為甚麼都挑我最忙的時候做,最閒就結束了
/images/emoticon/emoticon56.gif

感謝大家的觀看,每天多這個真的超累的=.=


上一篇
HTML Bootstrap 4 Tables 續
系列文
資工的日常30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言